<template>
<div class="container">
  
      <div class="left">
          <div class="header">
                <span class="tour"
                @click="$route.push('/pages/post/index.vue')">旅游攻略</span> /
                <span class="detail">攻略详情</span>
          </div>
          <h1>{{data.title}}</h1>
          <div class="time">
            <span>攻略：2019-05-22 10:57</span>
            <span>阅读：14758</span>
          </div>
          <!-- 文章详情 -->
          <div class="article"
            v-html="data.content">
          </div>
          <div class="icon">
              <div class="ctrl-item">
                <i class="el-icon-edit-outline"></i>
                <p>评论(4)</p>
              </div>
              <div 
                class="ctrl-item"
                @click="handleShare"
              >
                  <i class="el-icon-share"></i>
                  <p>分享</p>
              </div>
          </div>

          <h4>评论</h4>
          <div class="post-comment">
              
              <!-- 提交框 -->
              <PostInputDom />

              <!-- 评论 -->
              <div class="commentMain">
              <!-- 评论回复的列表 -->
                <PostComment
                    v-for="(comment, index) in commentList"
                    :key="index"
                    :commentData="comment"
                />
              </div>

              <!-- 分页 -->
              <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="5"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>

          </div>

      </div>

      <!-- 推荐攻略列表 -->
      <div class="right">
          <h2>相关攻略</h2>
          
            <PostRelated
              v-for="item in recommend"
              :key="item.id"
              :comments="item"
            />
       
      </div>
      
</div>
</template>

<script>
export default {
    data() {
      return {
        currentPage: 1,
        commentList: [],
        total: 1,
        content: {},
        recommend: [],
        data:{}
    };
  },

    watch: {
      $route() {
        // 获取文章
      this.$axios({
        url: '/posts/' + this.$route.query.id,
        // url: "/posts?id=4",
      }).then((res) => {
        // console.log(res.data);
        this.data = res.data;
        // console.log(this.content);
      });

      // 获取分页
      this.handleComment();

      // 获取侧边的文章标题
      this.$axios({
        url: "/posts/recommend",
        params: {
          id: this.$route.query.id,
        },
      }).then((res) => {
        // console.log(res);
        this.recommend = res.data.data;
      });
      }
    },
  
    methods: {
      //  分页
      handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.handleComment(val);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.handleComment(val);
      },
      handleComment(page=0) {
          this.$axios({
          url:'/posts/comments',
          params:{
            post:this.$route.query.id,
            _limit:5,
            _start:page,
          }
        }).then(res => {
          console.log(res);
          this.commentList = res.data.data;
          console.log(this.commentList);
          this.total = res.data.total
        })
      },

      /* 点击分享图标 */
      handleShare() {
        this.$confirm('暂不支持分享, 敬请期待', '提示', {
            confirmButtonText: '知道了',
            showCancelButton: false,
            type: 'warning'
        })
      },

  },

    created() {
      // 获取文章
      this.$axios({
        url: '/posts/' + this.$route.query.id,
        // url: "/posts?id=4",
      }).then((res) => {
        // console.log(res.data);
        this.data = res.data;
        // console.log(this.content);
      });

      // 获取分页
      this.handleComment();

      // 获取侧边的文章标题
      this.$axios({
        url: "/posts/recommend",
        params: {
          id: this.$route.query.id,
        },
      }).then((res) => {
        // console.log(res);
        this.recommend = res.data.data;
    });

  },

};
</script>

<style lang="less" scoped>
.container {
    width: 1000px;
    margin: 20px auto;
    display: flex;

    .left {
      width: 700px;
      .header {
        margin-bottom: 20px;
        color: #c6c4cc;
      
          .tour {
            color: #000;
            font-weight: 700;
            cursor: pointer;
          }
          .tour:hover {
            color: #409eff;
          }
          .detail {
            color:#6e6b7e;
          }
    }

      h1 {
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
      }

      .time {
        float: right;
        margin: 20px 20px  0;
        span {
          color: #999999;
        }
      }   
      
      .article {
        margin-top: 70px;
        width: 700px;
        overflow: hidden;

          /deep/ span {
            width: 700px;
            display: block;
            img{width: 100%;}
          }
      
          p {
            padding-bottom: 10px;

          }
      }

      .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 135px;
        .ctrl-item {
          width: 50px;
          height: 55px;
          margin: 0 20px;
          text-align: center;
          cursor: pointer;

          i {
            font-size: 35px;
            color: orange;
          }
          p {
            font-size: 14px;
            color: #999999;
          }
        }
      }

      .source {
        padding-top: 6px;
        color: #999999;
      }

      h2 {
        margin: 10px 0 10px 0;
      }

      h3 {
        margin-top: 25px;
      }

      .jpg {
        height: 565px;
        background-color: #fcf2dc;
        margin-bottom: 20px;
        img {
          height: 545px;
        }
      }

      h4 {
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 20px;
      }

      .commentMain {
        margin-top: 20px;
        border: 1px solid #ddd;
      }
      .block {
        margin-top: 10px;
        text-align: center;
      }

    }

    .right {
      width: 280px;
      padding-left: 52px;
      overflow: hidden;

      h2 {
        font-size: 18px;
        font-weight: 400;
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
      }
    }

}
    

  


  


  
</style>